<template>
  <div>
    <div>
      <el-col :span="14">
        <basic-container>
          <avue-data-tabs :option="totalOption"></avue-data-tabs>
        </basic-container>
      </el-col>
      <el-col :span="10">
        <basic-container>
          <avue-data-tabs :option="underReviewOption"></avue-data-tabs>
        </basic-container>
      </el-col>
    </div>
    <div>
      <el-col :span="24">
        <basic-container>
          <el-tabs>
            <el-tab-pane label="今日概览"></el-tab-pane>
            <basic-container>
              <avue-data-panel :option="dateSummaryOption"></avue-data-panel>
            </basic-container>
          </el-tabs>
        </basic-container>
      </el-col>
    </div>
    <div>
      <el-col :span="12">
        <basic-container>
          <el-tabs>
            <el-tab-pane label="日销量排行"></el-tab-pane>
            <el-scrollbar class="scrollbar" style="height: 25vh">
              <avue-notice v-if="dateGoods.length !== 0" :data="dateGoods" :option="goodsOption"></avue-notice>
              <div v-else style="text-align: center; color: lightgray; font-weight: bold"><span>暂无数据</span></div>
            </el-scrollbar>
          </el-tabs>
        </basic-container>
      </el-col>
      <el-col :span="12">
        <basic-container>
          <el-tabs>
            <el-tab-pane label="总销量排行"></el-tab-pane>
            <el-scrollbar class="scrollbar" style="height: 25vh">
              <avue-notice v-if="historyGoodsData.length !== 0" :data="historyGoodsData" :option="goodsOption"></avue-notice>
              <div v-else style="text-align: center; color: lightgray; font-weight: bold"><span>暂无数据</span></div>
            </el-scrollbar>
          </el-tabs>
        </basic-container>
      </el-col>
    </div>
    <div>
      <basic-container>
        <div>
          <el-switch
            @change="summarySwitchChange"
            style="margin-left: 20px"
            v-model="summarySwitch"
            inactive-text="销售单量"
            active-text="销售额">
          </el-switch>
          <el-date-picker
            style="margin-left: 20px"
            v-model="summaryDate"
            @change="dateChange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <dv-charts style="width: 90%; height: 60vh" :option="chartsSummary" />
      </basic-container>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import {
    getChartsSummary,
    getDateRankingGoods,
    getHistoryRankingGoods,
    getSummary,
    getTotal
  } from "@/api/order/statistic";
  import {dateFormat} from "@/util/date";

  export default {
    name: "wel",
    data() {
      return {
        summary: {},
        totalOption: {
          data: [
            {
              title: '销售额(NT$)',
              count: 0,
              text: '综合销售额',
              color: '#3091F5',
              key: 'NT$'
            },
            {
              title: '订单量',
              count: 0,
              text: '综合订单量',
              color: '#579556',
              key: 'order'
            },
            {
              title: '商品数',
              count: 0,
              text: '综合商品数量',
              color: '#8BBBED',
              key: 'goods'
            }
          ]
        },
        underReviewOption: {
          span: 12,
          data: [
            {
              title: '待审商品',
              count: 0,
              text: '待审核的商品',
              color: '#E4954A',
              key: 'goods'
            },
            {
              title: '待审订单',
              count: 0,
              text: '待确认的订单',
              color: '#A31C1C',
              key: 'order'
            }
          ]
        },
        dateSummaryOption: {
          span: 8,
          data: [
            {
              title: '销售额(NT$)',
              count: 0,
              icon: 'el-icon-success',
              color: '#3091F5'
            },
            {
              title: '订单量',
              count: 0,
              icon: 'el-icon-tickets',
              color: '#579556'
            },
            {
              title: '上新商品',
              count: 0,
              icon: 'el-icon-goods',
              color: '#8BBBED'
            }
          ]
        },
        charLine: {},
        summarySwitch: false,
        summaryDate: '',
        chartsSummary: {
          xAxis: {
            name: '日期',
            data: ['2022-01-01']
          },
          yAxis: {
            name: '销售单量',
            data: 'value'
          },
          series: [
            {
              data: [0],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
              }
            }
          ]
        },
        chartsSummaryData: [],
        activeNames: ['1', '2', '3', '5'],
        logActiveNames: ['26'],
        historyGoodsData: [],
        goodsOption: {
          props: {
            img: 'img',
            title: 'title',
            subtitle: 'subtitle',
            tag: 'tag',
            status: 'status'
          },
        },
        dateGoods: [],
      };
    },
    computed: {
      ...mapGetters(["userInfo"]),
    },
    created() {
    },
    mounted() {
      this.loadSummary()
      this.loadTotal()
      this.loadHistoryGoods()
      this.loadDateGoods()

      const now1 = new Date()
      const now2 = new Date()
      this.loadChartsSummary(dateFormat(new Date(now1.setDate(now1.getDate() - 7))), dateFormat(new Date(now2.setDate(now2.getDate() + 1))))
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      dateChange(val) {
        this.loadChartsSummary(dateFormat(val[0]), dateFormat(val[1]))
      },
      loadSummary() {
        getSummary().then(res => {
          const data = res.data.data
          this.dateSummaryOption.data[0].count = data.orderSellAmount
          this.dateSummaryOption.data[1].count = data.orderSellCount
          this.dateSummaryOption.data[2].count = data.goodsCount
        }).catch(err => {
          window.console.log(err)
        })
      },
      loadTotal() {
        getTotal().then(res => {
          const data = res.data.data
          this.totalOption.data[0].count = data.orderSellAmount
          this.totalOption.data[1].count = data.orderSellCount
          this.totalOption.data[2].count = data.goodsCount
          this.underReviewOption.data[0].count = data.goodsUnderReview
          this.underReviewOption.data[1].count = data.orderUnderReview
        }).catch(err => {
          window.console.log(err)
        })
      },
      loadHistoryGoods() {
        getHistoryRankingGoods().then(res => {
          res.data.data.map(item => {
            const imgUrl = item.pictureUrl ? item.pictureUrl.split(',')[0] : ''
            this.historyGoodsData.push({
              img: imgUrl,
              title: item.name,
              tag: item.sell ? item.sell : '0',
              status: item.id
            })
          })
        }).catch(err => {
          window.console.log(err)
        })
      },
      loadDateGoods() {
        getDateRankingGoods().then(res => {
          res.data.data.map(item => {
            const imgUrl = item.pictureUrl ? item.pictureUrl.split(',')[0] : ''
            this.dateGoods.push({
              img: imgUrl,
              title: item.name,
              tag: item.sell ? item.sell : '0',
              status: item.id
            })
          })
        }).catch(err => {
          window.console.log(err)
        })
      },
      loadChartsSummary(startDate, endDate) {
        getChartsSummary(startDate,endDate).then(res => {
          const data = res.data.data
          this.chartsSummaryData = data
          this.chartsSummary.xAxis.data = data.map(item => item.remark)
          this.chartsSummary.series[0].data = data.map(item => item.orderSellCount)

          this.chartsSummary = { ...this.chartsSummary }
        }).catch(err => {
          window.console.log(err)
        })
      },
      summarySwitchChange(val) {
        if (val === true) {
          this.chartsSummary.series[0].data = this.chartsSummaryData.map(item => item.orderSellAmount)
          this.chartsSummary.yAxis.name = '销售额'
        } else {
          this.chartsSummary.series[0].data = this.chartsSummaryData.map(item => item.orderSellCount)
          this.chartsSummary.yAxis.name = '销售单量'
        }
        console.log(this.chartsSummary)
        this.chartsSummary = { ...this.chartsSummary }
      }
    }
  };
</script>

<style>
  .el-divider--horizontal {
    margin: 12px 0 !important;
  }

  .el-font-size {
    font-size: 14px;
  }
  .scrollbar {
    height: 25vh;
  }
  .avue-notice__more {
    display:none;
  }
</style>

